<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    #controls.recording #resume {
      display: none;
    }

    #controls:not(.recording) #pause_gp {
      display: none;
    }
  </style>
</head>
<body>
  
<div id="controls">
  <video id="video"></video><br><br>
  <button id="begin"> begin </button> <button id="close"> close </button><br><br>
  <button id="record"> record </button> <button id="stop">stop</button><br><br>
  <video id="output-video"></video><br><br>
  <button id="play-record">play-record</button> 
</div>
  <script src="./ffmpeg.min.js"></script>
  <script type="text/javascript">
    (function() {
      var video = null;
      var begin = document.getElementById('begin');
      var close = null;
      var record = null;
      var stop = null;
      var play = null;
      var recorderBlobs = [];
      var mediaStream = null;
      var streamTrack = null;

      function startup() {
        close = document.getElementById('close');
        record = document.getElementById('record');
        stop = document.getElementById('stop');
        video = document.getElementById('video');
        play = document.getElementById('play-record');


        navigator.mediaDevices.getUserMedia({
          video: true
        }).then(stream => {
          mediaStream = stream;
          streamTrack = new MediaRecorder(stream);
          video.srcObject = stream;
          video.onloadedmetadata = function(e) {
            video.play();
          };
          bindHandler();
        }).catch(err => {
          throw err;
        });
      }


      function bindHandler() {
        streamTrack.ondataavailable = function({data}) {
          recorderBlobs.push(data);
          console.log(recorderBlobs);
        }
        close.onclick = function() {
          mediaStream.getTracks().forEach(track => track.stop());
        }
        record.onclick = function() {
          streamTrack.start();
        }
        stop.onclick = function() {
          streamTrack.stop();
        }
        play.onclick = async function() {
          const { createFFmpeg, fetchFile } = FFmpeg;
          const ffmpeg = createFFmpeg({ log: true });
          await ffmpeg.load();
          console.log('Start Concating');
          const inputPaths = [];
          for (let i = 0; i < recorderBlobs.length; i++) {
            const file = new File([recorderBlobs[i]], i+'.mp4', {
              type: "video/mp4",
            });
            const { name } = file;
            console.log(file.size)
            ffmpeg.FS('writeFile', name, await fetchFile(file));
            inputPaths.push(`file ${name}`);
          }
          console.log(inputPaths);
          
          ffmpeg.FS('writeFile', 'concat_list.txt', inputPaths.join('\n'));
          await ffmpeg.run('-f', 'concat', '-safe', '0', '-i', 'concat_list.txt', 'output.mp4');
          console.log('Complete Concating');
          const data = ffmpeg.FS('readFile', 'output.mp4');
          const optVideo = document.getElementById("output-video");
          optVideo.src = URL.createObjectURL(
            new Blob([data.buffer], {
              type: "video/mp4"
            })
          );
          optVideo.onloadedmetadata = function(e) {
            optVideo.play();
          };
        }
      }

      begin.onclick = startup;
    })()
  </script>
</body>
</html>